<template>
  <div class="tw-steps">
    <el-steps ref="el-steps" :active="active" finish-status="wait" align-center>
      <el-step
        v-for="step in steps"
        :key="step.id"
        :title="step.title"
        @mouseenter.native="handleEnter"
        @mouseleave.native="handleOut"
        @click.native="handleStepClick(step.id)"
      ></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  name: 'TwSteps',
  mounted () {
    if (this.autoPlay) {
      this.intervalid = setInterval(() => {
        if (this.currentActive++ > this.steps.length - 2) this.currentActive = 0
      }, this.intervalTime)
    }
    this.$watch('currentActive', (val, oldVal) => {
      if (val !== oldVal) {
        this.$emit('steps-change', this.steps.find(step => step.id === val))
        this.$emit('change', val)
      }
    })
  },
  model: {
    prop: 'active',
    event: 'change'
  },
  props: {
    autoPlay: {
      type: Boolean,
      default: true
    },
    steps: {
      type: Array,
      required: true
    },
    intervalTime: {
      type: Number,
      default: 20000
    },
    active: {
      type: Number
    }
  },
  data () {
    return {
      currentActive: this.active,
      intervalid: 0
    }
  },
  methods: {
    /**
     * 处理进度条点击事件
     * @param {Number} id 点击事件的id
     */
    handleStepClick (id) {
      this.currentActive = id
      this.$emit('step-click', id)
    },
    handleEnter () {
      if (this.intervalid) {
        clearInterval(this.intervalid)
      }
    },
    handleOut () {
      if (this.autoPlay) {
        this.intervalid = setInterval(() => {
          if (this.currentActive++ > this.steps.length - 2) this.currentActive = 0
        }, this.intervalTime)
      }
    }
  },
  beforeDestroy () {
    if (this.intervalid) {
      clearInterval(this.intervalid)
    }
  }
}
</script>

<style lang="scss">
  .tw-steps {
    height: 50px;
    text-align: center;
    .el-steps {
      width: 90%;
      margin: auto
    }
    .el-step__line {
      display: none
    }
    .el-step__icon {
      width: 20px;
      height: 20px;
    }
    .el-step__icon-inner {
      display: none
    }
    .el-step__head.is-wait {

      .el-step__icon.is-text {
        background: transparent;
        // border-color: $color-text-tab
        border-color: #00fffc;

      }
    }
    .el-step__head.is-process {
      .el-step__icon.is-text {
        background: #00fffc;
        border-color: #00fffc;
        box-shadow: 0 0 0 3px rgba(0, 255, 252, 0.4);
      }
    }
    .el-step__main {
      .el-step__title {
        // color: $color-text-tab;
        color: #00fffc;
        font-size: 18px;
        padding-top: 10px;
        line-height: 18px;
      }
    }
  }
</style>
